<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <ui:composition>
        <h:head>
            <script  type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;region=UA&amp;language=ru" />
            <h:outputScript name="map.js" />    
            <h:outputScript name="geo.js" />    
        </h:head>    
        <h:form id="show_on_map">
            <p:autoComplete completeMethod="#{addressLookup.complete}" 
                            value="#{addressLookup.address}"
                            maxResults="10" id="address" />
            <!-- onkeydown="codeAddress(this,event)"   -->
            <p:commandButton id="submit" action="#{addressLookup.submit()}"  value="#{bundle.Search}" update="@all" onclick="codeAddressButton()" />
        </h:form>
        <div class="mapborder">
            <div id="map_canvas" class="map"/>
            <div  class="rangex"><span id="rangex">0</span> km</div> 
            <div  class="rangey"><span id="rangey">0</span> km</div>
            <div id="showitemblock" 
                 class="ui-panel-content ui-panel ui-widget ui-widget-content ui-corner-all" 
                 style="position:absolute;z-index: 999;top:0px; left:0px;display: none">
                  Content  
            </div>
            <h:form id="mapstate" styleClass="hide mapsate">
            <h:inputText id="lat" value="#{addressLookup.lat}"/>
            <h:inputText id="lng" value="#{addressLookup.lng}"/>
            <p:inputText   id="address" value="#{addressLookup.address}" />
            <h:inputText id="lats" value="#{addressLookup.bounds.slat}"/>
            <h:inputText id="latn" value="#{addressLookup.bounds.nlat}"/>
            <h:inputText id="lngw" value="#{addressLookup.bounds.wlng}"/>
            <h:inputText id="lnge" value="#{addressLookup.bounds.elng}"/>
            <h:inputText id="zoom" value="#{addressLookup.zoom}"/>
            <h:outputText  id="lb" value="#{addressLookup.address}" />
            
            <p:commandButton id="update" action="#{addressLookup.updateGeoTag()}" update="@form"/>
        </h:form>     
    </div>
</ui:composition>
</html>